<template>
	<view>
		<image src="../../static/me/bg1.jpg" mode="" style="position: fixed;top: 0; left: 0;width: 100vw; height: 100vh;"></image>
		<view style="z-index: 100;position: absolute;width: 100vw;">
			<view style="display: flex; align-items: center; padding: 5rpx;padding-left: 4.3vh;">
				<picker @change="changeDorm" :value="dorm" :range="dormList" style="position: relative; top:2px;">
					<button type="primary" size="mini" @click="searchDorm">{{ dorm ? dorm : '选择楼舍↑' }}</button>
				</picker>

				<button type="default" size="mini" @click="goToWorkerTaskTotal()" style="position: relative;left: 23rpx;">统计</button>
				<button type="warn" size="mini" @click="getDormTaskMap()">概览图</button>
			</view>

			<view v-for="(item, index) in tasks" v-bind:key="item.id">
				<!-- 分页显示 -->
				<view v-if="index >= (pageNo - 1) * pageSize && index < pageNo * pageSize">
					<view style="border-top: 1px solid #c2c2c2; padding: 0 20rpx;">
						<view class="text-center" style="font-size: 40rpx;">{{ item.dorm + item.room }}</view>
						<view>水票价格 {{ item.waterPrice }}元</view>
						<view>寝室水桶 {{ item.bucketNum }}</view>
						<view>剩余水票 {{ item.ticketNum }}</view>
						<view>叫水时间 {{ item.timestamp }}</view>
						<view class="text-center"><button type="default" size="mini" @click="openModal(tasks[index])">完成送水</button></view>
					</view>
				</view>
			</view>
			<view><uni-pagination :total="total" :pageSize="pageSize" :current="pageNo" @change="chagePage" /></view>

			<!-- 模态弹窗 -->
			<view v-if="showModal" class="mask" @click="showModal = false"  style="z-index: 10000;"></view>
			<view v-if="showModal" class="border-black modal" style="z-index: 10000;">
				<view style="width: 80px; height: 80px; float: right;" @tap="showModal = false">
					<image src="../../static/likeFx/29.png" mode="" style="width: 50px; height: 50px;float: right; "></image>
				</view>
				<text style="font-size: 40rpx;">送出水桶</text>
				<uni-number-box :value="bucketNum" @change="value => (bucketNum = value)" />
				<text style="font-size: 40rpx;">收回空桶</text>
				<uni-number-box :value="receiveEmptyBucketNum" :max="currentTask.bucketNum" @change="value => (receiveEmptyBucketNum = value)" />
				<view style="padding-top: 30rpx;">
					<button type="warn" size="mini" @click="resetInput()" style="margin-right: 10rpx;">重置</button>
					<button type="primary" size="mini" @click="finishTask()">确认</button>
				</view>
			</view>

			<!-- 概览图 -->
			<scroll-view scroll-x="true" scroll-y="true" v-if="showDormTaskMap" class="border-black dormTaskMapModal" style="background-color: #c9edfb;">
				<view style="height: 30px;"><button type="warn" style="float: right;" size="mini" @click="showDormTaskMap = false">关闭</button></view>
				<!-- 6楼 -->
				<view>
					6楼
					<br />
					<span v-for="(item, index) in tasks">
						<button size="mini" v-if="item.room >= 600" class="border-black" @tap="openModal(item)">{{ item.room }}</button>
					</span>
				</view>
				<!-- 5楼 -->
				<view>
					5楼
					<br />
					<span v-for="(item, index) in tasks">
						<button size="mini" v-if="item.room >= 500 && item.room < 600" class="border-black " @tap="openModal(item)">{{ item.room }}</button>
					</span>
				</view>
				<!-- 4楼 -->
				<view>
					4楼
					<br />
					<span v-for="(item, index) in tasks">
						<button size="mini" v-if="item.room >= 400 && item.room < 500" class="border-black " @tap="openModal(item)">{{ item.room }}</button>
					</span>
				</view>
				<!-- 3楼 -->
				<view>
					3楼
					<br />
					<span v-for="(item, index) in tasks">
						<button size="mini" v-if="item.room >= 300 && item.room < 400" class="border-black " @tap="openModal(item)">{{ item.room }}</button>
					</span>
				</view>

				<!-- 2楼 -->
				<view>
					2楼
					<br />
					<span v-for="(item, index) in tasks">
						<button size="mini" v-if="item.room >= 200 && item.room < 300" class="border-black " @tap="openModal(item)">{{ item.room }}</button>
					</span>
				</view>
				<!-- 1楼 -->
				<view>
					1楼
					<br />
					<span v-for="(item, index) in tasks">
						<button size="mini" v-if="item.room < 200" class="border-black " @tap="openModal(item)">{{ item.room }}</button>
					</span>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import uniPagination from '@/components/uni-pagination/uni-pagination.vue';
import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue';

export default {
	components: {
		uniPagination,
		uniNumberBox
	},
	data() {
		return {
			userInfo: null,
			dormList: ['二区15舍'],
			dorm: null,
			tasks: [],
			bucketNum: 1, // 送出水桶(基本都是1 0则没有送出水桶)
			receiveEmptyBucketNum: 1, // 收回空桶数
			showModal: false,
			currentTask: null,
			pageSize: 5,
			pageNo: 1,
			total: 0,
			showDormTaskMap: false // 显示楼舍任务概览图
		};
	},
	onShow() {
		this.userInfo = uni.getStorageSync("userInfo")
		let dormCache = uni.getStorageSync('taskDormLastSelected'); // 上次选择的楼栋
		if (dormCache) this.dorm = dormCache;
		this.searchDorm();
		this.getTasksOfDorm();
	},
	// 下拉刷新
	onPullDownRefresh() {
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 300);
		this.getTasksOfDorm();
	},
	methods: {
		// 获取所有楼舍
		searchDorm() {
			let that = this;
			that.$request('/address/dorm/list', 'get').then(result => {
				that.dormList = result.data;
			});
		},
		// 切换为其他楼舍的送水任务
		changeDorm(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.dorm = this.dormList[e.target.value];
			uni.setStorageSync('taskDormLastSelected', this.dorm); // 缓存起来供下次查找直接使用
			this.getTasksOfDorm();
		},
		// 获取送水任务
		getTasksOfDorm() {
			let that = this;
			let path = '/task/dorm' + (that.dorm ? '?dorm=' + that.dorm : '');
			that.$request(path, 'get').then(result => {
				that.tasks = result.data;
				that.total = result.data.length;
				that.pageNo = 1;
				uni.stopPullDownRefresh();
			});
		},
		// 换页
		chagePage(e) {
			this.pageNo = e.current;
		},
		// 打开送水弹窗
		openModal(currentTask) {
			this.showModal = true;
			this.currentTask = currentTask;
			this.bucketNum = 1;
			this.receiveEmptyBucketNum = currentTask.bucketNum;
			console.log(currentTask)
		},
		resetInput() {
			this.bucketNum = 1;
			this.receiveEmptyBucketNum = 1;
		},
		finishTask() {
			let that = this;
			if (that.receiveEmptyBucketNum > that.currentTask.bucketNum) {
				this.$msg('收回空桶数量不合法请重新填', 1000);
				this.resetInput();
			} else {
				that.showModal = false;
				that.$request('/task/finish', 'post', {
					addressId: that.currentTask.addressId,
					bucketNum: that.bucketNum,
					receiveEmptyBucketNum: that.receiveEmptyBucketNum
				}).then(result => {
					that.getTasksOfDorm();
					that.$msg('操作成功', 1500, 'success');
				});
			}
		},

		// 任务统计
		goToWorkerTaskTotal() {
			uni.navigateTo({
				url: '/pages/task/statistic/workerTaskStatistic'
			});
		},
		// 楼舍任务概览图
		getDormTaskMap() {
			if (!this.dorm) {
				this.$msg('请先选择楼舍');
			} else {
				this.getTasksOfDorm();
				this.showDormTaskMap = true;
			}
		}
	}
};
</script>

<style>
.mask {
	position: fixed;
	top: 0px;
	width: 100vw;
	height: 100vh;
}
.border-black {
	border: 1px solid #000000;
}
.modal {
	position: fixed;
	top: 25vh;
	padding: 10px;
	width: 100vw;
	background-color: #c9edfb;
}
.dormTaskMapModal {
	position: fixed;
	top: 15vh;
	left: 0;
	padding: 1vw;
	width: 100vw;
	height: 70vh;
	background-color: #eeeeee;
}
</style>
